<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
    a {
        color: #000;
    }
    a:hover {
        text-decoration: none;
    }
	.form-inline select {
		width: 70px;
		margin-right: 25px;
	}
    .span-grade {
        margin-right: 25px;
    }
    input.grade {
        width: 160px;
        cursor: pointer;
        height: 30px;
        border:1px solid #669FC7;
        padding-left:14px !important;
        border-radius:10px !important;
        -moz-border-radius:10px;
    }
	#data-search-title {
		height: 30px;
	}
	#data-search-btn {
		margin-bottom: 4px;
	}
    img.cover {
        width: 100%;
        height: 22vh;
        object-fit: cover;
    }
    .item {
        margin-left: 2.2vw;
        margin-bottom: 20px;
        padding: 0;
    }
    .desc-item {
        margin-top: 8px;
    }
    .author {
        margin-top: 5px;
        color: #999999;
    }
    .div-cover {
        position: relative;
    }
    .div-cover .mask {
        position: absolute;
        top: 0;
        font-size: 4vw;
        display: none;
        background: rgba(0,0,0,0.6);
        height: 100%;
        width: 100%;
        text-align: center;
    }
    .div-cover .mask .icon-link {
        color: #FFF;
        margin-top: 7vh;
    }
</style>
<div class="page-header">
	<h1>资源列表</h1>
</div>
<div class="col-xs-12 content-filter">
	<div class="widget-box">
		<div class="widget-header" style="vertical-align:middle;">
			<h4 class="widget-title">
				内容筛选
			</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">标题&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box">	
                        <input style="float:left;height:30px;width:220px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="title" placeholder="搜索标题..." autocomplete="off">
                        <span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
                        <button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
                            <i class="ace-icon fa fa-search nav-search-icon white"></i>
                        </button>
					</div>
                </div>
                <div class="form-inline keyword-search-div">
					<label class="keyword-search-label">年级&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box">
                        <span class="input-icon input-icon-right pd0 span-grade">
                            <input class="grade" type="text" placeholder="请选择年级" id="select-source-grade" value="" />
                            <input type="text" name="grade" hidden value="" />
                            <i class="ace-icon fa fa-graduation-cap"></i>
                        </span>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">格式&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box" id="div-format">
						<a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
						<?php foreach($formats as $format): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=$format['value']?>"><?=$format['name']?></a>
						<?php endforeach; ?>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">类型&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box" id="div-type">
						<a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
						<?php foreach($types as $type): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=$type['id']?>"><?= $type['title'] ?></a>
						<?php endforeach; ?>
					</div>
                </div>
                <div class="form-inline keyword-search-div">
					<label class="keyword-search-label">科目&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box" id="div-subject">
						<a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
						<?php foreach($subjects as $subject): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=$subject['id']?>"><?= $subject['title'] ?></a>
						<?php endforeach; ?>
					</div>
                </div>
                <div class="form-inline keyword-search-div">
					<label class="keyword-search-label">出版社</label>
					<div class="keyword-search-box" id="div-publisher">
						<a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
						<?php foreach($publishers as $publisher): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=$publisher['id']?>"><?= $publisher['title'] ?></a>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<div id="main" style="margin-top:20px">
    </div>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
    $(function(){
        // 首页page为1
        var page = 1;
        // 是否已触底
        var end = false;
        var params = init_params();
        get_source_list(params, false);

        // 监听滚动条
        $(window).scroll(function(){
            // 判断数据是不是到底了
            var attrEnd = $('#main').attr('end');
            if(attrEnd === 'true'){
                end = true;
            }
        　　var scrollTop = $(this).scrollTop();
        　　var scrollHeight = $(document).height();
        　　var windowHeight = $(this).height();
        　　if(scrollTop + windowHeight === scrollHeight && end === false){
                ++ page;
                params.pageStart = get_page_start(page, 20);
                get_source_list(params);
        　　}
        });

        $("#data-search-btn").click(function() {
            // 触底end设置为false
            end = false;
            $('#main').attr('end', 'false');
            var gradeId = $("[name=grade]").val();
            var subjectId = $("#data-search-subject").val();
            var publisherId = $("#data-search-publisher").val();
            var typeId = $("#data-search-type").val();
            var format = $("#data-search-format").val();
            var title = $("#data-search-title").val().trim();
            // 初始化params
            params = init_params();
            // 重置page=1
            page = 1;
            if(subjectId != 0) {
                params.subjectId = subjectId;
            }
            if(publisherId != 0) {
                params.publisherId = publisherId;
            }
            if(typeId != 0) {
                params.typeId = typeId;
            }
            if(format != 0) {
                params.format = format;
            }
            if(title != '') {
                params.title = title;
            }
            if(gradeId != '') {
                params.gradeId = gradeId;
            }
            // 先清空数据
            $('#main').empty(); 
            get_source_list(params);
        });
        // 点击关键字和标题搜索
        $("body").on("click", ".keyword-search-keyword, #btn-search", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 筛选资源
            // 触底end设置为false
            end = false;
            $('#main').attr('end', 'false');
            var title = $("[name=title]").val().trim();
            var gradeId = $("[name=grade]").val();
            var subjectId = $("#div-subject .active").data("id");
            var publisherId = $("#div-publisher .active").data("id");
            var typeId = $("#div-type .active").data("id");
            var format = $("#div-format .active").data("id");
            // 初始化params
            params = init_params();
            // 重置page=1
            page = 1;
            if(subjectId != 0) {
                params.subjectId = subjectId;
            }
            if(publisherId != 0) {
                params.publisherId = publisherId;
            }
            if(typeId != 0) {
                params.typeId = typeId;
            }
            if(format != 0) {
                params.format = format;
            }
            if(title != '') {
                params.title = title;
            }
            if(gradeId != '') {
                params.gradeId = gradeId;
            }
            // 先清空数据
            $('#main').empty(); 
            get_source_list(params);
        });
 		// 敲回车就搜索
         $("[name=title]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=title]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=title]").val('');
					$(this).hide();
					// 重置搜索结果
                    // 触底end设置为false
                    end = false;
                    $('#main').attr('end', 'false');
                    var gradeId = $("[name=grade]").val();
                    var subjectId = $("#data-search-subject").val();
                    var publisherId = $("#data-search-publisher").val();
                    var typeId = $("#data-search-type").val();
                    var format = $("#data-search-format").val();
                    // 初始化params
                    params = init_params();
                    // 重置page=1
                    page = 1;
                    if(subjectId != 0) {
                        params.subjectId = subjectId;
                    }
                    if(publisherId != 0) {
                        params.publisherId = publisherId;
                    }
                    if(typeId != 0) {
                        params.typeId = typeId;
                    }
                    if(format != 0) {
                        params.format = format;
                    }
                    if(gradeId != '') {
                        params.gradeId = gradeId;
                    }
                    // 先清空数据
                    $('#main').empty(); 
                    get_source_list(params);
				})
			} else {
				$("#empty-search").hide();
			}
        });
        // 鼠标悬停图片上效果
        $(document).on("mouseover", ".div-cover", function(){
            $(this).children('.mask').show();
        })
        $(document).on("mouseout", ".div-cover", function(){
            $(this).children('.mask').hide();
        })
        // 初始化选择资源年级控件
        $("#select-source-grade").selectSourceGrade({
            "modalDataUrl": '<?= admin_url('source/select_source_grade_plugin_data_source') ?>',
            "resultDom": $("[name=grade]"),
            "callback": function(selectResult) {
                for(var i in selectResult) {
                    $("[name=grade]").val(i);
                    $("#select-source-grade").val(selectResult[i].name);
                    // 筛选资源
                    // 触底end设置为false
                    end = false;
                    $('#main').attr('end', 'false');
                    var title = $("[name=title]").val().trim();
                    var gradeId = $("[name=grade]").val();
                    var subjectId = $("#div-subject .active").data("id");
                    var publisherId = $("#div-publisher .active").data("id");
                    var typeId = $("#div-type .active").data("id");
                    var format = $("#div-format .active").data("id");
                    // 初始化params
                    params = init_params();
                    // 重置page=1
                    page = 1;
                    if(subjectId != 0) {
                        params.subjectId = subjectId;
                    }
                    if(publisherId != 0) {
                        params.publisherId = publisherId;
                    }
                    if(typeId != 0) {
                        params.typeId = typeId;
                    }
                    if(format != 0) {
                        params.format = format;
                    }
                    if(title != '') {
                        params.title = title;
                    }
                    if(gradeId != '') {
                        params.gradeId = gradeId;
                    }
                    // 先清空数据
                    $('#main').empty(); 
                    get_source_list(params);
                }
            }
        });
    })

    function get_source_list(params){
        var sourceListUrl = "<?= admin_url('source/get_source_list_for_check') ?>";
        var main = $('#main');
        ajax_get(sourceListUrl, params, function(res){
            var data = res.data;
            var detailUrl = "<?= admin_url('source/detail') ?>";
            for(let key in data){
                if(data[key]['cover'] == '') {
                    var coverSrc = "<?= $staticAdminUrl?>assets/images/empty.png ?>";
                } else {
                    var coverSrc = JSON.parse(data[key]['cover'])['link'];
                }
                main.append($(
                    '<div class="col-xs-2 item">\
                        <a href="' + detailUrl + '?id=' + data[key]['id'] + '" target="_blank">\
                            <div class="div-cover">\
                                <img class="cover" src="' + coverSrc + '" />\
                                <div class="mask">\
                                    <i class="fa fa-link icon-link"></i>\
                                </div>\
                            </div>\
                            <div class="desc-item">\
                                <div>' + data[key]['title'] + '</div>\
                                <div class="author"><i class="fa fa-user"></i>&nbsp;【' + data[key]['school_name'] + '】&nbsp;' + data[key]['username'] + '</div>\
                            </div>\
                        </a>\
                    </div>'
                ));
            }
            if(data.length < 20){
                main.attr('end', 'true');
                // 判断是否已存在该提示信息了
                tipElement = $(".not-found-tip")[0];
                if(tipElement) {
                    return;
                }
                main.append('<div class="col-xs-12 not-found-tip" style="text-align:center;font-size: 16px;margin-top:20px;margin-right: 50px;color: gray;">无更多数据...</div>');
            }
        })
    }

    // 通过页数获取查询参数start
    function get_page_start(page, size){
        if(page === 1) {
            return 0;
        }
        return (page - 1) * size;
    }

    // 初始化params参数
    function init_params() {
        var params = {};
        // 每页默认20个
        var size = 20;
        // 不显示遮罩层
        params.hideLoading = true;
        params.pageSize = size;
        params.pageStart = get_page_start(1, size);
        return params;
    }
</script>